<template>
  <div class="login-container">
    <div class="filterBlur"></div>
    <div class="entry_bar">
      <div class="left">
        <div class="img">
          <img src="../../../assets/images/login/leftimg.png" alt="" />
        </div>
      </div>
      <div class="right">
        <div class="name">墨鲸云商管理后台</div>
        <div class="formBox">
          <el-form ref="ref" :model="model" :rules="rules">
            <el-form-item prop="username">
              <el-input
              class="from_item"
                style="height: 100%"
                v-model="model.username"
                type="text"
                placeholder="账号/手机/邮箱"
                prefix-icon="el-icon-user"
                autocomplete="on"
                clearable
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="model.password"
                class="from_item"
                type="password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                autocomplete="on"
                clearable
                show-password
              />
            </el-form-item>
            <el-form-item prop="captcha_code">
              <el-row>
                <el-col :span="12">
                  <el-input
                    @keyup.enter.native="handleLogin()"
                    v-model="model.captcha_code"
                    placeholder="请输入验证码"
                    prefix-icon="el-icon-picture"
                    class="from_item"
                    autocomplete="off"
                    clearable
                  />
                </el-col>
                <el-col :span="10">
                  <el-image
                    :src="captcha_src"
                    fit="fill"
                    alt="验证码"
                    title="点击刷新验证码"
                    style="
                      cursor: pointer;
                      width: 100%;
                      height: 36px;
                      float: right;
                    "
                    @click="getCaptcha"
                  />
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <div class="remember" style="margin-bottom: 20px">
            <el-checkbox v-model="remember" @change="handleRemember"
              >记住密码</el-checkbox
            >
          </div>
          <div class="btnSubmit">
            <el-button
              style="width: 100%"
              :loading="loading"
              type="primary"
              @click.native.prevent="handleLogin"
              >登录
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--
    <div class="login-main">
      <el-form
        ref="ref"
        :model="model"
        :rules="rules"
        class="login-form"
        label-position="left"
      >
        <div class="title-container">
          <h3 class="title">墨鲸云商城系统</h3>
        </div>
        <el-form-item prop="username">
          <el-input
            v-model="model.username"
            type="text"
            placeholder="账号/手机/邮箱"
            prefix-icon="el-icon-user"
            autocomplete="on"
            clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="model.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            autocomplete="on"
            clearable
            show-password
          />
        </el-form-item>
        <el-form-item prop="captcha_code">
          <el-row>
            <el-col :span="20">
              <el-input
                @keyup.enter.native="handleLogin()"
                v-model="model.captcha_code"
                placeholder="请输入验证码"
                prefix-icon="el-icon-picture"
                autocomplete="off"
                clearable
              />
            </el-col>
            <el-col :span="4">
              <el-image
                :src="captcha_src"
                fit="fill"
                alt="验证码"
                title="点击刷新验证码"
                style="
                  cursor: pointer;
                  width: 200px;
                  height: 36px;
                  float: right;
                "
                @click="getCaptcha"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <div class="remember" style="margin-bottom: 20px">
          <el-checkbox v-model="remember" @change="handleRemember"
            >记住密码</el-checkbox
          >
        </div>
        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%; margin-bottom: 30px"
          @click.native.prevent="handleLogin"
          >登录
        </el-button>
      </el-form>
      <div class="bird-container bird-container--one">
        <div class="bird bird--one"></div>
      </div>

      <div class="bird-container bird-container--two">
        <div class="bird bird--two"></div>
      </div>

      <div class="bird-container bird-container--three">
        <div class="bird bird--three"></div>
      </div>

      <div class="bird-container bird-container--four">
        <div class="bird bird--four"></div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { apiCaptcha, apiSetting } from "@/api/admin/common";

export default {
  name: "AdminLogin",
  components: {},
  data() {
    return {
      system_name: "",
      loading: false,
      redirect: undefined,
      otherQuery: {},
      captcha_src: "",
      captcha_switch: 0,
      login_logo_url: "",
      login_bg_url: "",
      model: {
        username: "",
        password: "",
        captcha_key: "",
        captcha_code: "",
        remember: true,
      },
      remember: false,
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        captcha_code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },

      loginStyle: {
        "background-image": "",
      },
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  created() {
    if (localStorage.getItem("UserPass")) {
      var UserPass = JSON.parse(localStorage.getItem("UserPass"));
      this.model.username = UserPass.username;
      this.model.password = UserPass.password;
      this.remember = true;
    }
    this.setting();
  },
  mounted() {},
  destroyed() {},
  methods: {
    // 验证码
    getCaptcha() {
      apiCaptcha({}).then((res) => {
        this.captchaSet(res);
      });
    },
    captchaSet(res) {
      this.model.captcha_key = "";
      this.model.captcha_code = "";
      if (res.data.switch) {
        this.captcha_src = res.data.src;
        this.model.captcha_key = res.data.key;
      }
      this.captcha_switch = res.data.switch;
    },
    // 设置
    setting() {
      this.getCaptcha();
      apiSetting().then((res) => {
        this.system_name = res.data.system_name;
        this.login_logo_url = res.data.login_logo_url;
        this.login_bg_url = res.data.login_bg_url;
        if (this.login_bg_url) {
          this.loginStyle = {
            "background-image": "url(" + this.login_bg_url + ")",
          };
        }
        this.$store.dispatch("settings/changeSetting", {
          key: "systemName",
          value: res.data.system_name,
        });
        this.$store.dispatch("settings/changeSetting", {
          key: "pageTitle",
          value: res.data.page_title,
        });
        this.$store.dispatch("settings/changeSetting", {
          key: "logoUrl",
          value: res.data.logo_url,
        });
        this.$store.dispatch("settings/changeSetting", {
          key: "faviconUrl",
          value: res.data.favicon_url,
        });
      });
    },
    // 登录
    handleLogin() {
      this.$refs["ref"].validate((valid) => {
        if (valid) {
          if (this.remember) {
            localStorage.setItem(
              "UserPass",
              JSON.stringify({
                username: this.model.username,
                password: this.model.password,
              })
            );
          } else {
            localStorage.removeItem("UserPass");
          }
          this.loading = true;
          this.$store
            .dispatch("admin/login", this.model)
            .then((res) => {
              this.$router
                .push({
                  path: "/",
                  query: this.otherQuery,
                })
                .catch(() => {
                  this.loading = false;
                  this.getCaptcha();
                });
            })
            .catch((err) => {
              this.$messages.error(err.msg);
              this.loading = false;
              this.getCaptcha();
            });
        } else {
          return false;
        }
      });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },

    // 记住密码
    handleRemember(res) {
      this.remember = res;
      console.log(this.remember);
    },
  },
};
</script>

<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    /*color: $cursor;*/
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;

    input {
      /*background: transparent;*/
      border: 0;
      -webkit-appearance: none;
      border-radius: 0;
      /*color: $light_gray;*/
      /*caret-color: $cursor;*/

      &:-webkit-autofill {
        /*box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;*/
      }
    }
  }

  .el-form-item {
    // border: 1px solid rgba(255, 255, 255, 0.1);
    // background: rgba(0, 0, 0, 0.1);
    // border-radius: 5px;
    // color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  // background-color: $bg;
  overflow: hidden;

  .filterBlur {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    top: 0;
    background-image: url("../../../assets/images/login/loginBg.jpg");
    background-size: 100% 100%;
    // filter: blur(2px);
    z-index: -1;
  }

  .login-main {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    width: 460px;
    max-width: 100%;
    overflow: hidden;
    z-index: 1;
    background-color: #fff;
    border-radius: 1em;
    border: 1px solid #fff;
    // margin: 150px auto;
    padding: 30px 20px 10px 20px;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      /*color: $light_gray;*/
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .entry_bar {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 600px;
    width: 950px;
    min-width: 800px;
    z-index: 1;
    background-color: #fff;
    transform: translate(-50%, -50%);
    border-radius: 30px;
    box-shadow: 2px 7px 15px -2px #cccccc50;
    display: flex;
    .left {
      width: 600px;
      min-width: 400px;
      position: relative;
      .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .right {
      flex: 1;
      min-width: 400px;
      .name {
        padding-top: 70px;
        font-size: 30px;
        letter-spacing: 1px;
        font-weight: 700;
        color: #0059b8;
        font-family: "黑体";
        text-align: center;
        // line-height: 100px;
      }
      .from_item {
        width: 80%;
        margin: 0 auto;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #ccc;
      }
      .remember {
        width: 80%;
        margin: 15px auto;
      }
      .btnSubmit {
        width: 80%;
        margin: 15px auto;
      }
      .formBox {
        margin-top: 70px;


      }
    }
  }
}
@import url("https://fonts.googleapis.com/css?family=Arima+Madurai:300");

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1 {
  font-family: "Arima Madurai", cursive;
  color: black;
  font-size: 4rem;
  letter-spacing: -3px;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 3;
}

.container {
  z-index: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  // min-height: 100vh;
  min-height: 35rem;
  background-image: url("../../../assets/images/login/loginBg.jpg");
  background-blend-mode: soft-light;
  background-size: cover;
  background-position: center center;
  padding: 2rem;
}

.bird {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;

  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;

  &--one {
    animation-duration: 1s;
    animation-delay: -0.5s;
  }

  &--two {
    animation-duration: 0.9s;
    animation-delay: -0.75s;
  }

  &--three {
    animation-duration: 1.25s;
    animation-delay: -0.25s;
  }

  &--four {
    animation-duration: 1.1s;
    animation-delay: -0.5s;
  }
}

.bird-container {
  position: absolute;
  top: 20%;
  left: -10%;
  transform: scale(0) translateX(-10vw);
  will-change: transform;

  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  &--one {
    animation-duration: 15s;
    animation-delay: 0;
  }

  &--two {
    animation-duration: 16s;
    animation-delay: 1s;
  }

  &--three {
    animation-duration: 14.6s;
    animation-delay: 9.5s;
  }

  &--four {
    animation-duration: 16s;
    animation-delay: 10.25s;
  }
}

@keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-right-one {
  0% {
    transform: scale(0.3) translateX(-10vw);
  }

  10% {
    transform: translateY(2vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(0vh) translateX(30vw) scale(0.5);
  }

  30% {
    transform: translateY(4vh) translateX(50vw) scale(0.6);
  }

  40% {
    transform: translateY(2vh) translateX(70vw) scale(0.6);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.6);
  }

  60% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
}

@keyframes fly-right-two {
  0% {
    transform: translateY(-2vh) translateX(-10vw) scale(0.5);
  }

  10% {
    transform: translateY(0vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(-4vh) translateX(30vw) scale(0.6);
  }

  30% {
    transform: translateY(1vh) translateX(50vw) scale(0.45);
  }

  40% {
    transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.45);
  }

  51% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
}
</style>
